/**
* @Author luof
* @Date 2024/4/28 11:29
* @Description:
*/
<template>
  <!--        :effect="$route.path === item.path ? 'dark' : 'plain'"-->
  <div class="tag-container">
  <el-tag
      v-for="item in tabsValue"
      :key="item.path"
      type="primary"
      :effect="$route.path === item.path ? 'dark' : 'plain'"
      closable
      @click="handleChangeMenu(item)"
      @close="handleClose(item)"
      size="small"
  >{{ item.title }}
  </el-tag>
  </div>
</template>

<script setup lang="ts">

import {computed} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const store = useStore()
const router = useRouter()

const tabsValue = computed(() => store.state.tabs)
const handleChangeMenu = (item) => router.push({path: item.path})
const handleClose = (item) => {
  store.commit("changeRemoveTabs", item.path)
  //不存在路由信息
  if (tabsValue.value.length) {
    router.push({path: "/admin/page"})
  } else if (this.$route.path === item.path) {
    //当前路由和删除的路由相同则跳转上一级路由
    this.$router
        .push({path: tabsValue.value[tabsValue.value.length - 1].path})
        .catch(() => {
        })
  }
}
</script>

<style scoped lang="less">
.tag-container{

  .el-tag {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 26px;
    line-height: 26px;
    padding: 0 8px;
    font-size: 12px;
    margin-left: 5px;
    margin-top: 4px;
    margin-bottom: 4px;
    border-radius: 0;
  }

  .el-tag:before {
    content: "";
    background: #fff;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
    margin-right: 2px;
  }
}


</style>